<template>
  <div class="kanban-main-warp animated advice-main-container" style="display: block;">
    <div class="kanban-main-container content">
      <div class="kanbanCard-main-container">
        <div class="cardList-container-warp">

          <ul class="cardList-container ui-sortable second-type-container">
            <!--添加建议列-->
            <li class="kanban-card-container list-today animated">
              <div class="kanban-card-container">
                <div class="kanban-card-warp">
                  <div class="card-table">
                    <div class="head-tr">
                      <div class="header not-active" style="display: block;">
                        <div class="attr"><span>新增建议</span></div>
                      </div>

                    </div>
                    <div class="body-tr">
                      <div class="body-tr-container">
                        <div class="kanban-item-warp">
                          <ul class="list-ul doing ui-sortable allow-detail-click"
                              style="min-height: 100px;width: 100%">
                            <li class="kanban-Item-container animated tooltipstered add-advice-container"
                                style="padding: 0px;border:0;background: transparent;">
                              <el-row :gutter="10">
                                <el-col :span="24">
                                  <el-input v-model="title" placeholder="请输入标题"></el-input>
                                </el-col>

                              </el-row>
                              <el-row :gutter="10">
                                <el-col :span="24">
                                  <el-input v-model="desc" placeholder="请输入内容" type="textarea" :rows="4"></el-input>
                                </el-col>

                              </el-row>
                              <!-- <el-row :gutter="10">
                                <el-col :span="24">
                                  <el-input v-model="phoneNum" placeholder="请输入手机号"></el-input>
                                </el-col>
                              </el-row>
                              <el-row :gutter="10">
                                <el-col :span="6">语音建议</el-col>
                                <el-col :span="18"><i class="el-icon-menu">长按录音</i></el-col>
                              </el-row> -->
                              <el-row :gutter="10">
                                <el-col :span="24">
                                  <el-button v-on:click="addAdvice" type="primary" size="small"
                                             style="color:#fff;display: block;width:100%">
                                    保存
                                  </el-button>
                                </el-col>

                              </el-row>
                            </li>
                          </ul>
                        </div>

                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <!--建议列-->
            <li class="kanban-card-container list-today animated" data-card-id="today" v-for="item1 in adviceList">
              <div class="kanban-card-container">
                <div class="kanban-card-warp">
                  <div class="card-table">
                    <div class="head-tr">
                      <div class="header not-active" style="display: block;">
                        <div class="attr"><span>{{item1.value}}</span></div>
                      </div>
                    </div>
                    <div class="body-tr">
                      <div class="body-tr-container">
                        <div class="kanban-item-warp">
                          <ul class="list-ul doing ui-sortable allow-detail-click"
                              style="min-height: 100px;width: 100%">
                            <draggable class="dragArea today-task-list" :list="item1.list" tagKey="due"
                                       :anotherKey1="item1.key" anotherValue1='' :tagVal="daySelect"
                                       :options="{group:'task'}" @end="saveSort"
                                       @add="dragEvent">
                              <li class="kanban-Item-container animated tooltipstered"
                                  v-for="(item2,index) in advice[item1.key+ 'advice']" draggable='false'>
                                <p class="ad-title">{{item2.title}}</p>
                                <p class="ad-desc">{{item2.desc}}</p>
                                <span style="display: none">{{item2.id}}</span>
                                <div class="ad-btn-container">
                                  <i v-on:click="likeOrUnlike(item2.id,'unlike',item1.key+'advice')"
                                     class="el-icon-share ad-btn"
                                     style="margin-right: 10px;">{{item2.unlike?item2.unlike:0}}</i>
                                  <i v-on:click="likeOrUnlike(item2.id,'like',item1.key+'advice')"
                                     class="el-icon-star-on ad-btn">{{item2.like?item2.like:0}}</i>
                                  <div class="pay-btn ad-btn">
                                    <el-popover ref="popover" placement="top" width="150" trigger="hover">
                                      <img src="../../../static/images/avatar.png" alt=""
                                           style="width:150px;height:150px;"/>
                                      <i class="el-icon-warning ad-btn" slot="reference">{{item2.pay?item2.pay:0}}</i>
                                    </el-popover>

                                  </div>
                                </div>
                              </li>
                            </draggable>
                          </ul>
                        </div>
                        <div class="no-task-container" v-show="advice[item1.key+ 'advice'].length===0">
                          <img src="../../../static/z39pc/assets/images/no-task.png" alt=""/>
                          <p>点击添加新建议</p>
                          <p>或使用+号添加新建议</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="footer">
                    <div class="bottom" style="display:block">
                      建议： {{advice[item1.key+ 'advice'].length}}
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!--<div class="task-detail-container">-->
    <!--&lt;!&ndash;<task-detail ref="showTaskDetail"></task-detail>&ndash;&gt;-->
    <!--<task-detail ref="taskDetailComponent"></task-detail>-->
    <!--</div>-->

  </div>

</template>

<script>
  //	import ms from 'ms'
  import draggable from 'vuedraggable'
  import {mapState} from 'vuex'

  import store from '../../store'

  var initPage = function () {

  }
  export default {
    components: {
      // 'task-detail': taskDetail,
      draggable
    },
    data() {
      return {
        title: '',
        desc: '',
        phoneNum: '',
        // todayTags: [],

        addTaskTitlePlaceholder: '建议标题\n建议描述(回车换行后的内容自动添加到描述)快速添加快捷键Ctrl+Enter',
        adviceList: [{
          key: '',
          value: '用户建议(还未处理) ',
        }, {
          key: 'done',
          value: '已完成建议',
        }, {
          key: 'doing',
          value: '近期执行(已采纳)',
        }, {
          key: 'ok',
          value: '已采纳',
        }, {
          key: 'not',
          value: '未采纳(不考虑)',
        }],
        // advice: {
        //   advice: [],
        //   doneadvice: [],
        //   doingadvice: [],
        //   okadvice: [],
        //   notadvice: [],
        // },
        // needAndAdvice: {},
        // pid: '',
      };
    },
    // mixins: [taskAndTag, mixinPc],
    computed: {
      ...mapState({
        abc: state => {
          console.log(state)
        },
        uid: state => state.vux.uid,
        // minDate: state => state.z39.minDate,
        // maxDate: state => state.z39.maxDate,
        // taskAll: state => state.z39.taskAll,
        // tagDic: state => state.z39.tagDic,
        // taskDic: state => state.z39.taskDic,
        // tagitems: state => state.z39.tagitems,
        // tagitemDic: state => state.z39.tagitemDic,
        // days: state => state.z39.days,
        // projects: state => state.z39.projects,
        // members: state => state.z39.members,
        // todayTags: state => state.z39.tagtmps,
        // memberDic: state => state.z39.memberDic,
        daySelect: state => state.z39.selectedDayDate,
        // filterTaskState: state => state.z39.filterTaskState,
      }),
      advice() {
        let advice = {};
        this.adviceList.forEach(item => {
          advice[item.key + 'advice'] = store.state.needAndAdvice[item.key + 'advice'];
        });
        return advice;
      },
    },
    watch: {
      // "tagitems": {
      //   handler() {
      //     var temp = [];
      //     var len = this.tagitems.length;
      //     for (var i = 0; i <= len - 1; i++) {
      //       var item = this.tagitems[i];
      //       temp.push({
      //         key: item.key,
      //         name: item.name
      //       });
      //     }
      //
      //     //				this.getTagTmpList();
      //   },
      //   deep: true,
      // },
      // todayTags: {
      //   handler() {
      //     //				this.getTagTmpList();
      //   },
      //   deep: true,
      // },
      // "$route": function (to, from) {
      //   //路由发生变化时，更新标签模板的顺序，否则会出问题
      //   this.$store.commit({
      //     type: "z39/tagTmpResort"
      //   });
      // },
      // filterTaskState: function () {
      //   this.resort();
      // }
    },
    created() {
    },
    filters: {},
    methods: {
      /**
       * 赞或踩
       * @param taskid
       * @param key
       * @param taskType
       * @returns {Promise<void>}
       */
      async likeOrUnlike(taskid, key, taskType) {
        let data = {
          taskType: taskType,
          taskid: taskid,
          key: key
        };
        let res = await
          store.dispatch('likeOrUnlike', data);
        this.$message({
          message: res ? res : '成功',
          type: res ? 'warning' : 'info'
        });
      },
      /**
       * 添加建议
       * @returns {Promise<void>}
       */
      async addAdvice() {
        let data = {
          title: this.title,
          desc: this.desc,
          phoneNum: this.phoneNum,
          state: 'suggest',
        };
        let res = await
          store.dispatch('addAdviceOrNeed', data);
        this.$message({
          message: res ? res : '成功',
          type: res ? 'warning' : 'info'
        });
        if (!res) {
          this.title = '';
          this.desc = '';
          this.phoneNum = '';
        }
      },
      /**
       * 拖拽事件
       * @param ev
       * @returns {Promise<void>}
       */
      async dragEvent(ev) {
        //移动的建议id
        let id = ev.clone.childNodes[4].innerText;
        // 处理标签
        // console.log(ev)
        let fromKey = ev.from.attributes.anotherkey1.value;
        let toKey = ev.to.attributes.anotherkey1.value;
        //获取处理的建议
        let advice = {
          id: id,
          fromKey: fromKey,
          toKey: toKey,
          key: 'suggest'
        };
        let res = await
          store.dispatch('updateAdviceOrNeedTag', advice);
        this.$message({
          message: res ? res : '成功',
          type: res ? 'warning' : 'info'
        });
        if (res) {
          //todo 拖拽失败后的处理
        }
      },
      /**
       * 保存排序
       * @param ev
       * @param list
       * @returns {Promise<void>}
       */
      async saveSort(ev) {
        let fromKey = ev.from.attributes.anotherkey1.value;
        let toKey = ev.to.attributes.anotherkey1.value;
        console.log('从', fromKey, '到', toKey);
        if (fromKey !== toKey) return;
        let idList = '';
        ev.from.childNodes.forEach(item => {
          idList += `${item.childNodes[4].innerText},`
        });
        console.log('移动后的list', idList);
        localStorage.setItem(`${fromKey}advicesort`, idList);
      }
    },
    mounted() {
      initPage();
      // this.initTestData;

    }
  }
</script>
<style>
  .advice-main-container .kanban-item-warp ul li .el-row:not(:last-child) {
    margin-bottom: 10px;
    line-height: 36px;
  }

  .advice-main-container .kanban-item-warp ul li .el-row:last-child {
    /*border-top: 1px solid #ddd;*/
    text-align: right;
    /*padding-top: 10px;*/
  }
</style>
